import React from 'react'
import PropTypes from 'prop-types'
import {Button, Col, Form, Input, Row} from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const Filter = ({
  onFilterChange,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  } }) => {

  const handleSubmit = () => {
    let fields = getFieldsValue()
    console.log('fields from handleSubmit', fields)
    onFilterChange(fields)
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      fields[item] = undefined
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={8} sm={24}>
          <FormItem {...formItemLayout} label="重复好友微信号">
            {getFieldDecorator('wxId', {
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col md={8} sm={24}>
          <FormItem {...formItemLayout} label="重复好友微信昵称">
            {getFieldDecorator('nickName', {
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col span={8}>
          <div>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button className="margin-right" onClick={handleFormReset}>重置</Button>
          </div>
        </Col>
      </Row>
    </div >
  )
}

Filter.propTypes = {
  onFilterChange: PropTypes.func
}
export default Form.create()(Filter)
